import { title } from "process";
import {useState} from "react";

interface CarouselProps {
    title:string;
    subtitle:string;
    center?:boolean
    path:string[];    
}
const Carousel:React.FC<CarouselProps> = ({
    title,
    subtitle,
    center = false,
    path
})=>{
    const [index ,setIndex] = useState(0);
    const handleToggleNext = () => {
        setIndex((prevIndex) => (prevIndex + 1) % path.length);
    };
    const handleTogglePrev = () => {
        setIndex((prevIndex) => (prevIndex + path.length - 1) % path.length);
    };
    const handleToggleIndex = (newIndex: number) => {
        setIndex(newIndex);
    };
    return (
        <>
            <div className="flex flex-col">
                <div className={`
                    ${center ? "flex justify-center" : ""}
                `}>
                    <div className="text-3xl">
                        {title}
                    </div>
                    <div className="text-slate-300">
                        {subtitle}
                    </div>
                </div>
                <div>
                    {path.map((item,index)=>{
                        return (index < 6 ?
                            <div key={index}>
                                <img src={item} 
                                    className=""
                                alt="This is a image"/>
                            </div>:null
                            )
                        })
                    }
                </div>
                <div>
                    
                </div>
            </div>
        </>
    );
}

export default Carousel;